<template>
  <el-form
    :inline="true"
    :model="categoryId"
    class="demo-form-inline"
    ref="categoryId"
  >
    <el-form-item label="一级分类" style="margin: 20px">
      <el-select
        placeholder="请选择分类"
        v-model="categoryId.category1Id"
        @change="getCategory2List"
        :disabled="!flag"
      >
        <el-option
          :label="category.name"
          :value="category.id"
          v-for="(category, index) in category1List"
          :key="index"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="二级分类" style="margin: 20px">
      <el-select
        placeholder="请选择分类"
        v-model="categoryId.category2Id"
        @change="getCategory3List"
        :disabled="!flag"
      >
        <el-option
          :label="category.name"
          :value="category.id"
          v-for="(category, index) in category2List"
          :key="index"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="三级分类" style="margin: 20px">
      <el-select
        placeholder="请选择分类"
        v-model="categoryId.category3Id"
        @change="getAttrInfoList"
        :disabled="!flag"
      >
        <el-option
          :label="category.name"
          :value="category.id"
          v-for="(category, index) in category3List"
          :key="index"
        ></el-option>
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: 'Category',
  // flag 三级联动是否可用
  props: ['flag'],
  data() {
    return {
      category1List: [],
      category2List: [],
      category3List: [],
      categoryId: {
        category1Id: '',
        category2Id: '',
        category3Id: ''
      }
    }
  },
  mounted() {
    // 页面加载完就要请求分类1
    this.getCategory1List()
  },
  methods: {
    // 获取1级分类列表
    async getCategory1List() {
      const result = await this.$api.attr.reqCategory1List()
      if (result.code === 200) {
        this.category1List = result.data
      } else {
        return Promise.reject(new Error('file'))
      }
    },
    // 获取2级分类列表
    async getCategory2List() {
      // 对表单进行重置
      // 清除数据
      this.category2List = []
      this.category3List = []
      this.categoryId.category2Id = ''
      this.categoryId.category3Id = ''
      const result = await this.$api.attr.reqCategory2List(
        this.categoryId.category1Id
      )
      if (result.code === 200) {
        this.category2List = result.data
      } else {
        return Promise.reject(new Error('file'))
      }
    },
    // 获取3级分类列举
    async getCategory3List() {
      // 对表单进行重置
      // 清除数据
      this.category3List = []
      this.categoryId.category3Id = ''
      const result = await this.$api.attr.reqCategory3List(
        this.categoryId.category2Id
      )
      if (result.code === 200) {
        this.category3List = result.data
      } else {
        return Promise.reject(new Error('file'))
      }
    },
    // 三级分类选择后，通知父组件显示分类的属性值
    getAttrInfoList() {
      // 整理id
      this.$emit('categoryIdInfo', this.categoryId)
    }
  }
}
</script>

<style>
</style>
